<template>
    <div>
        <dv-capsule-chart :config="computedConfig"
            style="width:100%; height: 500px; box-sizing: border-box; padding: 10px;" />
    </div>
</template>

<script setup>
import { reactive, computed } from 'vue'
import _ from 'lodash'

const props = defineProps(['data'])

const computedConfig = computed(() => handleData(props.data))

const handleData = (data) => {
    // console.log('employments', data)
    const handledData = Object.entries(_.groupBy(data, item => item.company)).map(([key, value]) => ({
        name: key,
        value: value.length
    })).sort((item1, item2) => item2.value - item1.value)
    // console.log(handledData)
    return reactive({
        data: handledData,
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '万元',
        labelNum: 8,
    })
}
</script>